<template>
  <div>
    <!-- 头部操作栏 start -->
    <el-button type="primary"
      icon="el-icon-plus"
      style="margin-bottom:10px"
      size="small"
      @click="handleAdd">新增</el-button>
    <!-- 头部操作栏 end -->

    <!-- 数据表格 start -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="权重" sortable prop="weight"/>
      <el-table-column label="任务类型" prop="name">
        <template slot-scope="scope">
          {{ taskTypesMap[scope.row.task_type] }}
        </template>
      </el-table-column>
      <el-table-column label="任务名" prop="task_name" />
      <el-table-column label="任务说明" min-width="170" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.task_desc }}
        </template>
      </el-table-column>
      <el-table-column label="任务间隔">
        <template slot-scope="scope">
          {{ scope.row.interval ? scope.row.interval+'分钟' : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="限制">
        <template slot-scope="scope">
          每天{{ scope.row.limit_count }}次
        </template>
      </el-table-column>
      <el-table-column label="金币奖励" prop="species_count"/>
      <el-table-column label="图片" min-width="60">
        <template slot-scope="scope">
          <el-image slot="reference"
            style="height: 36px;cursor: pointer;"
            :src="scope.row.image_url"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        width="150"
        fixed="right"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleUpdate(scope.row)">修改</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格 end -->

    <!-- 添加或修改对话框 start -->
    <el-dialog :title="title"
      :visible.sync="open"
      width="550px"
      :close-on-click-modal="false">
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="150px">

        <el-form-item label="权重" prop="weight">
          <el-input-number v-model="form.weight" :precision="0" :min="0"/>
        </el-form-item>

        <el-form-item label="任务类型" prop="task_type">
          <el-select v-model="form.task_type">
            <el-option v-for="it in taskTypes"
              :key="it.value"
              :label="it.label"
              :value="it.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="任务名" prop="task_name">
          <el-input v-model.trim="form.task_name"/>
        </el-form-item>

        <el-form-item label="任务说明" prop="task_desc">
          <el-input v-model.trim="form.task_desc"/>
        </el-form-item>

        <el-form-item label="任务间隔" prop="interval" v-if="form.task_type===2" key="interval">
          <el-input-number v-model="form.interval" :precision="0" :min="0"/> 分钟
        </el-form-item>

        <el-form-item label="限制次数" prop="limit_count">
          每天
          <el-input-number v-model="form.limit_count" :precision="0" :min="0" style="width:167px"/>
          次
        </el-form-item>

        <el-form-item label="金币奖励" prop="species_count">
          <el-input-number v-model="form.species_count" :precision="0" :min="0"/> 个
        </el-form-item>

        <el-form-item label="图片" prop="image_url">
          <ImgUpload v-model="form.image_url"/>
        </el-form-item>

      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm">确 认</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改对话框 end -->
  </div>
</template>

<script>
import ImgUpload from '@/components/img-upload'
import { listTask, updateTask, delTask } from '@/api/activity/task'
export default {
  name: 'Task',
  components: {
    ImgUpload
  },
  data () {
    return {
      taskTypes: [
        { value: 1, label: '每日签到' },
        { value: 2, label: '视频广告' }
      ],
      // 遮罩层
      loading: true,
      // 表格数据
      list: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        task_type: 1, // 1 签到 2 视频广告
        task_name: '',
        task_desc: '',
        interval: 0,
        limit_count: 0,
        species_count: 0,
        image_url: '',
        weight: 0
      },
      // 表单校验
      rules: {
        task_type: [
          { required: true, message: '任务类型不能为空', trigger: 'blur' }
        ],
        task_name: [
          { required: true, message: '任务名不能为空', trigger: 'blur' }
        ],
        task_desc: [
          { required: true, message: '任务说明不能为空', trigger: 'blur' }
        ],
        interval: [
          { required: true, message: '任务间隔不能为空', trigger: 'blur' }
        ],
        limit_count: [
          { required: true, message: '限制次数不能为空', trigger: 'blur' }
        ],
        species_count: [
          { required: true, message: '奖励金币不能为空', trigger: 'blur' }
        ],
        image_url: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '权重不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    taskTypesMap () {
      const o = {}
      for (let it of this.taskTypes) {
        o[it.value] = it.label
      }
      return o
    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询任务列表 */
    getList () {
      this.loading = true
      listTask().then(response => {
        this.list = response.data.list.map(it => {
          it.interval = Math.round(it.interval / 60)
          return it
        })
      }
      ).finally(() => {
        this.loading = false
      })
    },
    /** 表单重置 */
    reset () {
      this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.title = '添加任务'
      this.form.id = undefined
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset()
      this.open = true
      this.title = '修改任务'
      this.$nextTick(() => {
        const keys = Object.keys(this.form)
        for (const item of keys) {
          this.form[item] = row[item]
        }
        this.form.id = row.id
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (!valid) return
        const params = Object.assign({}, this.form)
        if (params.task_type === 1) {
          params.interval = 0
        } else {
          params.interval = Math.round(params.interval * 60) // 转为秒
        }
        updateTask(params).then(() => {
          this.msgSuccess(`${params.id ? '修改' : '新增'}成功`)
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete ({ id, task_name }) {
      this.$confirm(`是否确认删除该任务？任务名：${task_name}`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTask(id).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
      })
    }
  }
}
</script>
<style lang="scss">
.el-table .el-image {
  /deep/.el-image__inner {
    max-height: 36px;
  }
}
</style>
